<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车页面</title>
    <link rel="stylesheet" href="../css/shop.css" />
    <link rel="stylesheet" href="../font/iconfont.css" />
    <link rel="stylesheet" href="../css/react.css" />
  </head>
  <body>
    <div id="continer" class="bignav">
      <div class="continer nav">
        <div class="nav_left">
          <div class="index">
            <a href="./index.html"
              ><img src="../images/in_03.jpg" alt="首页" /><span
                >京东首页</span
              ></a
            >
          </div>
          <div class="map">
            <i class="iconfont icon-dingwei"></i>
            <span>深圳</span>
          </div>
        </div>
        <div class="nav_right">
          <div class="login">
            <span class="hello">你好，请登录</span><a href="./register.html">免费注册</a>
          </div>
          <ul>
            <li><a href="#">我的订单</a></li>
            <li>
              <a href="#">我的京东</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li><a href="#">京东会员</a></li>
            <li>
              <a href="#">企业采购</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li>
              <a href="#">客户服务</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li>
              <a href="#">网站导航</a><img src="../images/xia_09.jpg" alt="" />
            </li>
            <li><a href="#">手机京东</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div id="continer">
      <div class="continer shoping">
        <h1><img src="../images/re_03.jpg" alt="logo" /></h1>
        <a href="./shop.html" class="shop">
          购物车
        </a>
        <div class="inp">
          <input type="text" value="百搭鞋" />
          <button class="btn1">搜索</button>
        </div>
      </div>
    </div>
    <!-- 提示登录 -->
    <div id="continer">
      <div class="continer logins">
        <p>您还没有登录!登录后购物车的商品将保存到你您的帐号中</p>
        <a href="./login.html">立即登录</a>
      </div>
    </div>
    <!-- 购物车列表 -->
    <div id="continer">
      <div class="continer shop_list">
        <p>全部商品<span>1</span></p>
        <h6 class="one">
          <input class="allTop" type="checkbox" /><span>全选</span
          ><span>商品</span><span>单价</span><span>数量</span><span>小计</span
          ><span>操作</span>
        </h6>
        <ul class="allshop"></ul>
        <div class="close">
          <div class="close_left">
            <input type="checkbox" class="allTop" />
            <span>全选</span>
            <p>删除选中商品，移到关注</p>
          </div>
          <div class="close_right">
            <p class="p1">已选择<i>1</i>件商品</p>
            <p class="p2">总价￥<i></i></p>
            <a href="#" class="maxbtn">去结算</a>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../js/cookie.js"></script>
  <script src="../js/jquery-3.4.1.min.js"></script>
  <script>
    var uname = getCookie("username");
    console.log(uname);
    
    if (uname) {
      var data = localStorage.getItem(uname);
      data = JSON.parse(data);
      if (data) {
        $(".shops").text(data.length);
      } else {
        $(".shops").text("0");
      }
      
      $(".hello").text("欢迎 " + uname);
      $(".hello").css({
        "fontSize":"16px",
        "fontWeight":"bold",
        "color":"green"
      });
      $(".logins").css("display", "none");
    } else {
      var str = `<div class="box continer">
              <p class="kong">未检测到您登录，请先登录再查看购物车</p>
              <a href="./login.html">登录</a>
            </div>`;
      $(".shop_list").html(str);
      $(".hello").text("你好，请登录");
      $(".logins").css("display", "block");
    }
    $(".hello").click(function() {
      if ($(".hello").text() == "你好，请登录") {
        location.href = "./login.html";
      }
    });

    //加载购物车数据
    var data = localStorage.getItem(uname);
    if (!data || data == "[]") {
      if(uname){        
        var str = `<div class="box continer">
              <p class="kong">购物车空空如也</p>
              <a href="./list.html">添加商品</a>
            </div>`;
      $(".shop_list").html(str);
      }
      
    } else {
      data = JSON.parse(data);
      var arr = data.map(function(v) {
        return v.id;
      });
      var ids = arr.join(",");

      $.ajax({
        url: "../server/shop.php",
        type: "post",
        dataType: "json",
        data: {
          ids: ids
        },
        success: function(res) {
          if (res.status == 200) {
            res = res.data;
            var str = "";
            for (var i = 0; i < res.length; i++) {
              var data1 = data.filter(function(v) {
                return v.id == res[i].id;
              });
              str += `<li data_id="${res[i].id}">
                      <input class="oneshop" type="checkbox">
                      <div class="shop">
                          <img src="${res[i].img}" alt="商品">
                          <h5>${res[i].name}</h5>
                          <h4><span>黑色</span><span>39码(24.5cm)</span></h4>
                      </div>
                      <span class="shop_many">￥<i>${res[i].many}</i></span>
                      <div class="shop_size">
                          <span class="btn1">-</span>
                          <input class="fr" name="number"  data_stock="${res[i].stock}"  value="${data[i].number}" type="number" >
                          <span class="btn2">+</span>
                      </div>
                      <div class="max_many">￥<i></i></div>
                      <div class="delete">删除</div>
                  </li>`;
            }
            $(".allshop").html(str);
            //全选按钮
            $(".allTop").click(function() {
              console.log(111);

              if ($(this).prop("checked")) {
                $(".oneshop").prop("checked", true);
                $(this).prop("checked", true);
              } else {
                $(".oneshop").prop("checked", false);
                $(this).prop("checked", false);
              }
              math();
            });
            //单选按钮
            $(".oneshop").click(function() {
              var xuan = Array.prototype.slice
                .call($(".oneshop"))
                .every(function(v) {
                  return $(v).prop("checked");
                });
              if (xuan) {
                $(".allTop").prop("checked", true);
              } else {
                $(".allTop").prop("checked", false);
              }
              math();
            });
            //数量减
            $(".btn1").click(function() {
              $(this)
                .next()
                .val(
                  $(this)
                    .next()
                    .val() -
                    0 -
                    1
                );
              if (
                $(this)
                  .next()
                  .val() -
                  0 <=
                1
              ) {
                $(this)
                  .next()
                  .val(1);
              }
              var _this = this;
              var arr1 = data.find(function(v) {
                return (
                  v.id ==
                  $(_this)
                    .parent()
                    .parent()
                    .attr("data_id")
                );
              });
              //更新本地存储
              arr1.number =
                $(this)
                  .next()
                  .val() - 0;
              localStorage.setItem(uname, JSON.stringify(data));
              math();
            });
            //输入框
            $(".fr").on("change",function(){
              var _this = this;
              var arr1 = data.find(function(v) {
                return (
                  v.id ==
                  $(_this)
                    .parent()
                    .parent()
                    .attr("data_id")
                );
              });
              //更新本地存储
              arr1.number =
                $(this)
                  .val() - 0;
              localStorage.setItem(uname, JSON.stringify(data));
              math();
            })
            //数量加
            $(".btn2").click(function() {
              $(this)
                .prev()
                .val(
                  $(this)
                    .prev()
                    .val() -
                    0 +
                    1
                );
              var stock = $(this)
                .prev()
                .attr("data_stock");
              if (
                $(this)
                  .prev()
                  .val() -
                  0 >=
                stock
              ) {
                $(this).prev.val(stock);
                alert("亲，库存只有这么多了");
              }
              var _this = this;
              var arr1 = data.find(function(v) {
                return (
                  v.id ==
                  $(_this)
                    .parent()
                    .parent()
                    .attr("data_id")
                );
              });
              //更新本地存储
              arr1.number =
                $(this)
                  .prev()
                  .val() - 0;
              localStorage.setItem(uname, JSON.stringify(data));
              math();
            });
            math();

            //删除购物车
            $(".delete").click(function() {
              
              var _this = this;
              var index = data.findIndex(function(v) {
                return (
                  v.id ==
                  $(_this)
                    .parent()
                    .attr("data_id")
                );
              });
              data.splice(index, 1);
              localStorage.setItem(uname, JSON.stringify(data));
              $(this)
                .parent()
                .remove();
              if (data.length == 0) {
                var str = `<div class="box continer">
              <p class="kong">购物车空空如也</p>
              <a href="./index.html">添加商品</a>
            </div>`;
                $(".shop_list").html(str);
              }
            });
          }
          //成功的回调函数
        }
      });
    }

    //计算函数
    function math() {
      var num1 = 0;
      var many1 = 0;
      $("[name='number']").each(function(i, v) {
        $(v)
          .parent()
          .next()
          .children()
          .text(
            $(v).val() *
              $(v)
                .parent()
                .prev()
                .children()
                .text()
          );
        if (
          $(v)
            .parent()
            .siblings(".oneshop")
            .prop("checked")
        ) {
          num1 += $(v).val() - 0;
          many1 +=
            $(v)
              .parent()
              .next()
              .children()
              .text() - 0;
        }
      });
      $(".p1")
        .children()
        .text(num1);
      $(".p2")
        .children()
        .text(many1);
    }
  </script>
</html>
